<template>
  <div>
    <h2>{{ state }}</h2>
    <button @click="change">更新数据</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, readonly, shallowReadonly } from 'vue';

const state = reactive({
  name: "孙悟空",
  car: {
    name: '筋斗云'
  }
})

let state1 = readonly(state)
let state2 = shallowReadonly(state)

function change() {
  // readonly属于深层只读
  // state1.name = '猪八戒'
  // state1.car.name = '筋斗云1'

  // shallowReadonly 渐层只读 
  // state2.name = '猪八戒'
  // 深层可改
  state2.car.name = '筋斗云1'
}
</script>

<style scoped></style>